<template>
    <van-sticky>
        <van-nav-bar
            title="消费记录"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
                <div>
                <div class="item" v-for="item in list" :key="item.id">
                    <p>{{ item.content }}</p>
                    <p>金额： {{ item.total }} 元</p>
                    <p>时间：{{ item.createtime_date }}</p>
            
                </div>
            </div>
            <van-back-top />
        </van-list>
    </van-pull-refresh>
</template>


<script setup>
const {proxy} = getCurrentInstance();

const business = proxy.$business;
const refreshing = ref(false);// 刷新状态
const loading = ref(false);// 懒加载状态
const finished = ref(false);// 是否加载完成状态
const page = ref(1);
const list = ref([]);

// 下拉刷新事件
const onRefresh = () =>
{
    refreshing.value = true;
    loading.value = true;
    finished.value = false;
    page.value = 1;
    list.value = [];
    setTimeout(onLoad,1500);
    
}
// 上拉加载事件
const onLoad =async () =>
{
    if(refreshing.value)
    {
        refreshing.value = false;
    }
    let params = {
        id:business.value.id,
        page:page.value
    }

    let result =await proxy.$http.post({
        url:'/business/record',
        params
    })

    finished.value = false;
    loading.value =false;

    if(result.code === 1)
    {
        let count = result.data.count ?? 0;
        list.value = list.value.concat(result.data.list);
        if(list.value.length >= count)
        {
            finished.value = true;

            return false;
        }

    
    }else{
        finished.value = true;
        proxy.$warning(result.msg);
    }
}

const onBack = () => proxy.$router.back();
</script>

<style scoped>
.item {
    background-color: #fff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    transition: box-shadow .3s;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    }

    p {
        margin: 0;
        padding: 4px 0;
        line-height: 1.5;

        &:first-child {
            font-size: 16px;
            color: #323233;
            font-weight: 500;
            margin-bottom: 8px;
        }

        &:nth-child(2) {
            font-size: 14px;
            color: #595959;
            margin-bottom: 4px;
        }

        &:last-child {
            font-size: 12px;
            color: #969799;
        }
    }
}
</style>